<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查找HTML的父子</title>
</head>
<body>
<!--元素节点.parentNode	返回元素的父节点。-->
<!--元素节点.parentElement	返回元素的父元素。-->
<!--元素节点.childNodes	返回元素的一个子节点的数组（包含空白文本Text节点）。-->
<!--元素节点.children	返回元素的一个子元素的集合（不包含空白文本Text节点）。-->
<!--元素节点.firstChild	返回元素的第一个子节点（包含空白文本Text节点）。-->
<!--元素节点.firstElementChild	返回元素的第一个子元素（不包含空白文本Text节点）。-->
<!--元素节点.lastChild	返回元素的最后一个子节点（包含空白文本Text节点）。-->
<!--元素节点.lastElementChild	返回元素的最后一个子元素（不包含空白文本Text节点）。-->
<!--元素节点.previousSibling	返回某个元素紧接之前节点（包含空白文本Text节点）。-->
<!--元素节点.previousElementSibling	返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。-->
<!--元素节点.nextSibling	返回某个元素紧接之后节点（包含空白文本Text节点）。-->
<!--元素节点.nextElementSibling	返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）。-->
<div id="box">
    <ul id="ul">
        <li><a href="https://www.baidu.com">我是超链接1</a></li>
        <li id="two"><a href="https://www.baidu.com">我是超链接2</a></li>
        <li><a href="https://www.baidu.com">我是超链接3</a></li>
        <li><a href="https://www.baidu.com">我是超链接4</a></li>
    </ul>
</div>

<script>
    var box = document.getElementById("box");
    var ul = document.getElementById("ul");
    var two = document.getElementById("two");
    console.log(ul.parentNode);
    console.log(ul.parentElement);
    console.log("===============");

    console.log(box.childNodes);
    console.log(box.children);
    console.log("===============");

    console.log(ul.firstChild);
    console.log(ul.firstElementChild);
    console.log(ul.lastChild);
    console.log(ul.lastElementChild);
    console.log("===============");

    console.log(two.previousSibling);
    console.log(two.previousElementSibling);
    console.log(two.nextSibling);
    console.log(two.nextElementSibling);
</script>
</body>
</html>